<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Docs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  <!-- Use title if it's in the page YAML frontmatter -->
  <title>Docs</title>

  <link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="javascripts/application.js" type="text/javascript"></script>

  <!--[if lt IE 9]>
    <script src="javascripts/html5shiv.js" type="text/javascript"></script>
  <![endif]-->

</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="brand" href="./">Docs</a>

      <div class="nav-collapse collapse">
        <ul class="nav">

          

              
              <li>
                <a href="index.html">Home</a>
              </li>

          

              
              <li>
                <a href="files.html">Files</a>
              </li>

          

              
              <li>
                <a href="general_layout.html">Layout</a>
              </li>

          

              
              <li>
                <a href="widgets.html">Widgets</a>
              </li>

          

              
              <li>
                <a href="help.html">Help</a>
              </li>

          

        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">

  <!-- Docs nav
  ================================================== -->
  <div class="row-fluid">
    <div class="span3 bs-docs-sidebar">
      <ul class="nav nav-list bs-docs-sidenav">

        
            <li><a href="#top_navbar">Top navigation bar</a></li>
        
            <li><a href="#sidebars">Sidebars</a></li>
        
            <li><a href="#main_content">Main Content</a></li>
        

      </ul>
    </div>

    <div class="span9">

      



      
          <section id="top_navbar">
            <div class="page-header">
              <h4>Top navigation bar</h4>
            </div>
            <p>
  It's pretty standard bootstrap code, I only added a toggle button for the sidebar since it dissapears when the screen goes smaller. Also, changed the default bootstrap button for toggling the menu, with another one that's using fontawesome for the 3-line icon
</p>

<p>
  Check out the extracts and the comments below
</p>

<xmp class="prettyprint">
  <div class="navbar navbar-top navbar-inverse">
    <div class="navbar-inner">
      <div class="container-fluid">

        <a class="brand" href="#">Core Admin</a>

        <!-- the toggle buttons. notice the data-targets on them, they point to the topbar/sidebar -->

        <ul class="nav pull-right">
          <li class="toggle-primary-sidebar hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-primary"><a><i class="icon-th-list"></i></a></li>
          <li class="collapsed hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-top"><a><i class="icon-align-justify"></i></a></li>
        </ul>

        <div class="nav-collapse nav-collapse-top">

          <ul class="nav full pull-right">
            <li class="dropdown user-avatar">

              <!-- the dropdown has a custom user-avatar class, this is the small avatar with the badge -->

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span>
                    <img class="menu-avatar" src="images/avatars/avatar1.jpg" /> <span>John Smith <i class="icon-caret-down"></i></span>
                    <span class="badge badge-dark-red">5</span>
                  </span>
              </a>

              <ul class="dropdown-menu">

                <!-- the first element is the one with the big avatar, add a with-image class to it -->

                <li class="with-image">
                  <div class="avatar">
                    <img src="images/avatars/avatar1.jpg" />
                  </div>
                  <span>John Smith</span>
                </li>

                ...
              </ul>
            </li>
          </ul>

          <!-- the bootstrap search bar has an optional animated class, that makes it grow when you click on it -->

          <form class="navbar-search pull-right">
            <input type="text" class="search-query animated" placeholder="Search">
            <i class="icon-search"></i>
          </form>

          ...
        </div>
      </div>
    </div>
  </div>
</xmp>
          </section>
      
          <section id="sidebars">
            <div class="page-header">
              <h4>Sidebars</h4>
            </div>
            <p>There are two parts to the sidebar, the background, and the actual sidebar content. This is because of the variable heights of the sidebars and the main content (one might be bigger than the other and it would look bad)</p>

<p>The first part with the background:</p>

<xmp class="prettyprint">
  <div class="sidebar-background">
    <div class="primary-sidebar-background"></div>
  </div>
</xmp>

<p>The width of the sidebar can be easily modified via the mixins provided - all widths will be automatically recalculated</p>

<xmp class="prettyprint">

  <div class="primary-sidebar">

    <!-- Main nav -->

    <ul class="nav nav-collapse collapse nav-collapse-primary">

      <!-- normal nav link (active too) -->

      <li class="active">
        <span class="glow"></span>
        <a href="#">
          <i class="icon-dashboard icon-2x"></i>
          <span>Dashboard</span>
        </a>
      </li>

      <!-- dropdown nav link. the dark-nav class is necessary for dropdowns in the sidebar -->

      <li class="dark-nav">
        <span class="glow"></span>
        <a class="accordion-toggle collapsed " data-toggle="collapse" href="#menu1">
          <i class="icon-beaker icon-2x"></i>
          <span>
            UI Lab
            <i class="icon-caret-down"></i>
          </span>
        </a>

        <ul id="menu1" class="collapse"> <!-- add class 'in' to be open -->

          <li class="">
            <a href="#">
              <i class="icon-hand-up"></i> Buttons
            </a>
          </li>
          ...

        </ul>
      </li>

    </ul>
  </div>

</xmp>
          </section>
      
          <section id="main_content">
            <div class="page-header">
              <h4>Main Content</h4>
            </div>
            <p>The main content area (what's right to the sidebar) is made up of a top area, a breadcrumb line and the actual content</p>

<xmp class="prettyprint">
  <div class="main-content">
    <div class="container-fluid">
      <div class="row-fluid">

        <!-- top area -->

        <div class="area-top clearfix">
          <div class="pull-left header">
            <h3 class="title">
              title, icon here
            </h3>
            <h5>
              subtitle
            </h5>
          </div>

          <!-- the sparkline charts area. you can basically put anything here, i chose sparklines -->

          <ul class="inline pull-right sparkline-box">
            <li class="sparkline-row">
              <h4 class="blue"><span>Orders</span> 847</h4>
              <div class="sparkline big" data-color="blue"><!-- some,numbers,comma,separated,here --></div>
            </li>
            ...
          </ul>

        </div>

      </div>
    </div>

    <div class="container-fluid padded">
      <div class="row-fluid">

        <!-- Breadcrumb line. first item has a blue class attached to breadcrumb-button. there's a yellow class too, try it -->

        <div id="breadcrumbs">
          <div class="breadcrumb-button blue">
            <span class="breadcrumb-label"><i class="icon-home"></i> Home</span>
            <span class="breadcrumb-arrow"><span></span></span>
          </div>

          <div class="breadcrumb-button">
              <span class="breadcrumb-label">
                add icon, label here
              </span>
              <span class="breadcrumb-arrow"><span></span></span>
          </div>
        </div>

      </div>
    </div>

    <div class="container-fluid hpadded">
      <!-- HERE goes the actual page content -->
    </div>
  </div>
</xmp>

          </section>
      

    </div>
  </div>

</div>
</body>
</html>